<template>
  <div class='container'>
    <div class="app-container">
      <el-card>
              <!-- 头部 -->
        <el-form label-width="80px">
            <el-row>
              <el-col :span="8">
                <el-form-item label="关键字">
                  <el-input placeholder="根据编号搜素" v-model="query.keyword"></el-input>
                  </el-form-item>
              </el-col>
            <el-col :span="16" style="text-align:right;">
              <el-button size="small" @click="clean">清除</el-button>
              <el-button size="small" type="primary" @click="handleClick">搜索</el-button>
            </el-col>
            </el-row>
        </el-form>
        <!-- 警告 -->
          <el-alert
          :title="`数据一共${counts}条`"
          type="info"
          show-icon>
        </el-alert>
        <!-- 表格部分 -->
        <el-table
            :data="tableTotal"
            style="width: 100%"
            :header-cell-style="{background:'#fafafa'}"
            class="table">
            <el-table-column prop="id" label="编号" width="200">
            </el-table-column>
            <!--  -->
            <el-table-column label="题型" width="180">
              <template #default="scope">
                <p v-if="scope.row.questionType==='1'">单选</p>
                <p v-else-if="scope.row.questionType==='2'">多选</p>
                <p v-else>简答题</p>
              </template>
            </el-table-column>
            <!--  -->
            <el-table-column label="题目编号" width=200px>
              <template #default="scope">
                <div v-for="(item, index) in scope.row.questionIDs" :key="index">
                <a href="#" style="color: rgb(0, 153, 255);">
                  <p @click="preview(item.id)" class="number">{{ item.number }} </p>
                </a>
                </div>
              </template>
            </el-table-column>
            <!--  -->
            <el-table-column prop="addTime" label="录入时间"></el-table-column>
            <el-table-column prop="totalSeconds" label="答题时间（s）"> </el-table-column>
            <el-table-column prop="accuracyRate" label="正确率（%）"></el-table-column>
            <el-table-column prop="userName" label="录入人"></el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <el-button @click="delRandomsList(scope.row)" type="danger" icon="el-icon-delete" circle plain></el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-pagination
          style="text-align: right; margin-top: 20px; margin-bottom: 15px;"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="query.page"
            :page-sizes="[20, 30, 50, 100]"
            :page-size="query.pagesize"
            background
            layout="prev, pager, next, sizes, jumper"
            :total="counts">
          </el-pagination>
      </el-card>
      <Preview :dialogVisible.sync="dialogVisible"  :questionItem="questionItem" />
    </div>
  </div>
</template>

<script>
import { randoms, detail, removeRandoms } from '@/api/hmmm/questions'
import Preview from '../components/questions-preview.vue'
export default {
  data () {
    return {
      // 组题列表
      tableTotal: [],
      // 题目编号
      questionItem: {},
      dialogVisible: false,
      // 参数
      query: {
        page: 1, // 当前页数
        pagesize: 10,
        keyword: ''
      },
      // 总条数
      counts: 0
    }
  },
  components: {
    Preview
  },
  created () {
    this.getRandoms()
    // this.getDetail()
  },
  methods: {
    // 获取列表信息
    async getRandoms () {
      const res = await randoms(this.query)
      console.log(res, '组题列表')
      this.tableTotal = res.data.items
      // 列表总数据
      this.counts = res.data.counts
    },
    // 题目编号
    preview (cid) {
      detail({ id: cid }).then(({ data }) => {
        this.questionItem = data
        this.dialogVisible = true
      }).catch(() => { this.dialogVisible = true })
    },
    // 页码变化
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.query.pagesize = val
      this.getRandoms()
    },
    // 当前页变化
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.query.page = val
      this.getRandoms()
    },
    // 搜索
    handleClick () {
      this.getRandoms()
    },
    // 清除
    clean () {
      this.query.page = 1
      this.query.keyword = ''
      this.getRandoms()
    },
    delRandomsList (row) {
      this.$confirm('确认删除吗？', '温馨提示', { type: 'warning' }).then(async () => {
        await removeRandoms(row)
        // console.log(res)
        this.getRandoms()
        this.$message.success('删除成功')
      }).catch(() => {
        console.log('取消')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.table {
  margin-top: 15px;
  }
  .number {
  color: #09f;
  cursor: pointer;
  line-height: 10px;
}
</style>
